Flutter Web Start

---

Flutter Web Start

---

使用Flutter搭建Web环境，并开发Web应用！

1. Flutter搭建Web环境
2. 创建Flutter Web项目并运行
3. 搭建过程中所遇到问题并解决

1. Flutter搭建Web环境

1. 从github上面把flutter_web项目克隆到本地

git clone https://github.com/flutter/flutter_web.git

2. 安装flutter_web的编译工具webdev

//默认为方式一即可

//方式一：环境变量只配置了flutter sdk而没有配置dart sdk
flutter pub global activate webdev
//方式二：环境变量已经配置了dart sdk
pub global activate webdev

如果出现如下信息，则安装成功

Precompiling executables…
Precompiled webdev:webdev.
Installed executable webdev.
Activated webdev 2.0.6

上述信息中可能有一个Warning提示需要配置环境变量，按提示将$HOME/.pub-cache/bin配置到环境变量即可

在.base_profile文件中配置环境变量

2. 创建Flutter Web项目并运行

1. 使用现有项目

   flutter_web目录下有examples几个demo项目，比如：hello_world

   cd <flutter_web目录>/examples/hello_world

   执行

   flutter pub upgrade 或 pub upgrade
   或
   flutter pub get 或 pub get

   如果出现

   RandyWeideMacBook-Pro:hello_world wei$ flutter pub get
   ! flutter_web 0.0.0 from path ../../packages/flutter_web                
   ! flutter_web_ui 0.0.0 from path ../../packages/flutter_web_ui          
   Running "flutter packages get" in hello_world...                   21.9s

   说明项目配置成功了，然后就是启动本地服务

   //环境变量只配置了flutter sdk而没有配置dart sdk
   flutter pub global run webdev serve
   //环境变量已经配置了dart sdk
   webdev serve

   出现以下信息就是成功了

   RandyWeideMacBook-Pro:hello_world wei$ flutter pub global run webdev serve
   [INFO] Building new asset graph completed, took 1.5s
   [INFO] Checking for unexpected pre-existing outputs. completed, took 1ms
   [INFO] Serving `web` on http://localhost:8080
   [INFO] Running build completed, took 18.3s
   [INFO] Caching finalized dependency graph completed, took 201ms
   [INFO] Succeeded after 18.5s with 556 outputs (3217 actions)
   [INFO] ------------------------------------------------------------------------

   然后就可以在浏览器使用信息中的地址 http://localhost:8080 访问到了。

2. 创建新项目

   使用Visual Studio Code，具体配置Flutter Dart插件就不多说。使用命令面板Flutter: New Web Project，就可以创建一个新项目了，等配置完成后，按F5或者Debug -> Start Debugging，就可以启动服务并自动打开浏览器。

3. 项目运行效果

3. 搭建过程中所遇到问题并解决

1. 找不到”pubspec.yaml”的文件

出现条件是执行此命令时

flutter pub upgrade

错误信息如下

! flutter_web 0.0.0 from path ../../packages/flutter_web                
! flutter_web_ui 0.0.0 from path ../../packages/flutter_web_ui          
Could not find a file named "pubspec.yaml" in "/Users/air/develop_tool/flutter_1.7.8/.pub-cache/hosted/pub.dartlang.org/build_runner-1.6.1".

解决方案

您看到这里可能会疑惑“找不到文件？难道是环境搭建过程中出现问题了导致文件丢失，或则是缺少环境搭建中的某个流程”。
但是，经过各方的努力最终确定是“没有管理员权限导致的”，因此解决办法就是：“在命令前面加sudo”


sudo flutter pub upgrade

2. webdev无法运行Flutter Web项目

出现条件是执行此命令时

flutter pub global run webdev serve

错误信息如下

webdev could not run for this project.
The pubspec.yaml file has changed since the pubspec.lock file was generated, please run "pub get" again.
pub failed (78)

解决方案

您看到这里可能会疑惑“文件改变了？pubspec.lock文件？如果你根据提示再次运行pub get你会更加的疑惑”。

但是，经过各方的努力最终确定是“没有管理员权限导致的”，因此解决办法就是：“在命令前面加sudo”


sudo flutter pub global run webdev serve

3. 问题解决方案概括

在此篇步骤中，若出现意外的错误，90%的错误都是“网络、权限”引起的，请检查后重试即可解决90%的问题！

---

未完待续。。。